<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生表</title>
    <script src="JS/vue.2.6.10.js"></script>
    <link rel="stylesheet" href="CSS/css.css">
</head>
<body>
<div>
    <h1>学生表</h1>
</div>
<div id="student" class="container">
    <div class="con-title">
        <input type="text" placeholder="search" @input="search"
               list="poshche" class="search"/>
        <datalist id="poshche">
            <option v-for="item in searchlist" :value="item"></option>
        </datalist>
        <button class="add" @click="add">新增</button>
    </div>
    <div>
        <table>
            <tr>
                <th style="width: 60px">Id</th>
                <th style="width: 200px">学生名字</th>
                <th style="width: 60px">年龄</th>
                <th style="width: 60px">性别</th>
                <th style="width: 150px">省份</th>
                <th style="width: 200px">爱好</th>
                <th style="width: 150px">操作</th>
            </tr>
            <tr v-cloak v-for="(item,index) of slist">
                <td>{{ index + 1 }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.sex }}</td>
                <td>{{ item.city }}</td>
                <td>{{ item.hobby.join(' | ') }}</td>
                <td>
                    <button @click="showOverlay(index)">修改</button>
                    |
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
        </table>
    </div>
    <model :list="selectedlist" :isactive="isActive" v-cloak
           @change="changeOverlay" @modify="modify"></model>
</div>
<script>
    Vue.component('model', {
        props: ['list', 'isactive'],
        template: `<div class="overlay" v-show="isactive">
        <div class="con">
        <h2 class="title">新增 | 修改</h2>
        <div class="content">
        <table>
        <tr>
        <td>学生名字</td>
            <td><input type="text" v-model="modifylist.username"></td>
                   </tr>
                   <tr>
                       <td>年龄</td>
                       <td><input type="text" v-model="modifylist.age"></td>
                   </tr>
                    <tr>
                       <td>性别</td>
                       <td>
                           <label class="sexPad"><input  type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
                           <label class="sexPad"><input  type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
                       </td>
                   </tr>
                   <tr>
                       <td>城市</td>
                       <td>
                           <select name="" id="" v-model="modifylist.city">
                               <option value="厦门">厦门</option>
                               <option value="漳州">漳州</option>
                               <option value="福州">福州</option>
                               <option value="北京">北京</option>
                               <option value="龙岩">龙岩</option>
                               <option value="泉州">泉州</option>
                           </select>
                       </td>
                   </tr>
                   <tr>
                       <td>爱好</td>
                       <td>
                           <label class="hobbyPad"><input type="checkbox" v-model="modifylist.hobby" value="篮球">篮球</label>
                           <label class="hobbyPad"><input type="checkbox" v-model="modifylist.hobby" value="读书">读书</label>
                           <label class="hobbyPad"><input type="checkbox" v-model="modifylist.hobby" value="跳舞">跳舞</label>
                           <label class="hobbyPad"><input type="checkbox" v-model="modifylist.hobby" value="蹦迪">蹦迪</label>
                           <label class="hobbyPad"><input type="checkbox" v-model="modifylist.hobby" value="弹琴">弹琴</label>
                       </td>
                   </tr>
        </table>
         <p class="btnDialog">
             <button @click="changeActive">取消</button>
                   <button  @click="modify">保存</button>
        </p>
        </div>
    </div>
</div>`,
        computed:{
            modifylist() {
                return this.list;
            }
        },
        methods:{
            changeActive() {
                this.$emit('change');
            },
            modify(){
                this.$emit('modify',this.modifylist);
            }
        }
    });
    const student = new Vue({
        el: '#student',
        data: {
            isActive: false,//是否显示弹窗
            selected: -1,//选择了哪条记录
            selectedlist: {},//选中的信息
            slist: [],
            searchlist: [],
            list: [{
                username: "韩信",
                age: '18',
                sex: '男',
                city: '厦门',
                hobby: ['唱跳', 'Rap', '篮球']
            },
                {
                    username: "大乔",
                    age: '19',
                    sex: '女',
                    city: '漳州',
                    hobby: ['弹琴', '赏月', '文学']
                },
                {
                    username: "安琪拉",
                    age: '20',
                    sex: '女',
                    city: '福州',
                    hobby: ['唱跳', '蹦迪', '夜店']
                },
                {
                    username: "赵云",
                    age: '56',
                    sex: '男',
                    city: '北京',
                    hobby: ['唱跳', 'Rap', '篮球']
                },
                {
                    username: "马超",
                    age: '49',
                    sex: '男',
                    city: '龙岩',
                    hobby: ['飞车', '撸串', '篮球']
                },
                {
                    username: "迪迦",
                    age: '35',
                    sex: '男',
                    city: '泉州',
                    hobby: ['吹牛', '跳舞', '装X']
                }
            ]
        },
        created() {
            this.setSlist(this.list);
        },
        methods: {
            //修改
            showOverlay(index) {
                this.selected = index;
                this.selectedlist = this.list[index];
                this.changeOverlay();
            },
            //点击保存按钮
            modify(arr) {
                if (this.selected > -1) {
                    Vue.set(this.list, this.selected, arr);
                    this.selected = -1;
                } else {
                    this.list.push(arr);
                }
                this.setSlist(this.list);
                this.changeOverlay();
            },
            add: function () {
                this.selectedlist = {
                    username: '',
                    age: '',
                    sex: '男',
                    city: '北京市',
                    hobby: []
                };
                this.selected = -1;
                this.isActive = true;
            },
            //删除
            del(index) {
                if (confirm('小子，你确定要删除这个英雄吗？')===false){
                    return
                }
                this.list.splice(index, 1);
                this.setSlist(this.list);
            },
            changeOverlay() {
                this.isActive = !this.isActive;
            },
            // 获取需要渲染到页面中的数据
            setSlist(arr) {
                this.slist = JSON.parse(JSON.stringify(arr));
            },
            //搜索
            search(e) {
                var v = e.target.value,
                    self = this;
                self.searchlist = [];
                if (v) {
                    var serk = [];
                    //过滤需要的数据
                    this.list.forEach(function (item) {
                        if (item.username.indexOf(v) > -1) {
                            if (self.searchlist.indexOf(item.username) === -1) {
                                self.searchlist.push(item.username);
                            }
                            serk.push(item);
                        } else if (item.age.indexOf(v) > -1) {
                            if (self.searchlist.indexOf(item.age) === -1) {
                                self.searchlist.push(item.age);
                            }
                            serk.push(item);
                        }
                    });
                    this.setSlist(serk);// 将过滤后的数据给了slist
                } else {
                    // 没有搜索内容，则展示全部数据
                    this.setSlist(this.list);
                }
            }
        },
        watch: {}
    });
</script>
</body>
</html>